<template>
    <div class="overYear-content">
      <aps-form
        :config="apsForm.formConfig"
        :model="apsForm.formData"
        :formRef="apsForm.formRef"
        :labelWidth="apsForm.labelWidth"
        ref="form"
      ></aps-form>
      <lb-table
        :column="tableData.column"
        :data="tableData.data"
        border
        :height="600"
        pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[20, 40, 60, 80]"
        :pager-count="5"
        :current-page.sync="currentPage"
        :total="total"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @p-current-change="handleCurrentChange"
      >
      </lb-table>
      <div class="all-area">
        <span>当前时间总电能量：</span>
        <span>{{ allNum }}</span>
        <span>kwh</span>
      </div>
    </div>
  </template>

  <script>
  import {
    getoverYearlist,
    getoverYeartotalvalue,
  } from "@/api/departmental/index.js";
  import dayConst from "@/views/work/departmental/components/day.js";

  export default {
    name: "",
    components: {},
    dicts: [],
    data() {
      return {
        dayDis: true,
        monthDis: true,
        dayArr: [],
        allNum: 0,
        apsForm: {
          formRef: "form",
          labelWidth: "auto",
          formData: {},
          formConfig: {
            formAttr: {
              inline: true,
              size: "small",
            },
            properties: {
              year: {
                label: "年份:",
                typeName: "el-date-picker",
                type: "year",
                size: "small",
                "value-format": "yyyy",
                placeholder: "请选择年份",
                clearable: true,
                "picker-options": {
                  disabledDate(time) {
                    let date = new Date();
                    return time.getFullYear() > date.getFullYear();
                  },
                },
                change: (val) => {
                  // console.log(val);
                  let that = this;
                  that.$refs?.form?.setFieldValue("day", null);
                  that.$refs?.form?.setFieldValue("month", null);
                  that.judgeDay();
                },
              },
              month: {
                label: "月份:",
                typeName: "el-select",
                render: (h) => {
                  let that = this;
                  let arr = [];
                  arr = [
                    {
                      label: "一月",
                      value: "1",
                    },
                    {
                      label: "二月",
                      value: "2",
                    },
                    {
                      label: "三月",
                      value: "3",
                    },
                    {
                      label: "四月",
                      value: "4",
                    },
                    {
                      label: "五月",
                      value: "5",
                    },
                    {
                      label: "六月",
                      value: "6",
                    },
                    {
                      label: "七月",
                      value: "7",
                    },
                    {
                      label: "八月",
                      value: "8",
                    },
                    {
                      label: "九月",
                      value: "9",
                    },
                    {
                      label: "十月",
                      value: "10",
                    },
                    {
                      label: "十一月",
                      value: "11",
                    },
                    {
                      label: "十二月",
                      value: "12",
                    },
                  ];
                  // 数据严谨处理,处理后端数据异常情况
                  let valNum = that.$refs?.form?.getFieldsValue().month;
                  let a = [
                    h(
                      "el-select",
                      {
                        attrs: {
                          placeholder: "请选择月份",
                          value: valNum,
                          clearable: true,
                          disabled: that.monthDis,
                        },
                        props: ["value"],
                        on: {
                          change: (value) => {
                            that.$refs?.form?.setFieldValue("month", value);
                            that.$refs?.form?.setFieldValue("day", null);
                            that.judgeDay();
                          },
                        },
                      },
                      [
                        arr.map((item) => {
                          let { label, value } = item;
                          return h("el-option", {
                            props: {
                              label,
                              value: value,
                              key: value,
                            },
                          });
                        }),
                      ]
                    ),
                  ];
                  return h("div", a);
                },
              },
              day: {
                label: "日期:",
                render: (h) => {
                  let that = this;
                  let arr = [...that.dayArr];
                  // 数据严谨处理,处理后端数据异常情况
                  let valNum = that.$refs?.form?.getFieldsValue().day;
                  let a = [
                    h(
                      "el-select",
                      {
                        attrs: {
                          placeholder: "请选择日期",
                          value: valNum,
                          clearable: true,
                          disabled: that.dayDis,
                        },
                        props: ["value"],
                        on: {
                          change: (value) => {
                            that.$refs?.form?.setFieldValue("day", value);
                            that.$forceUpdate();
                          },
                        },
                      },
                      [
                        arr.map((item) => {
                          // let { label, value } = item;
                          return h("el-option", {
                            props: {
                              label: item,
                              value: item,
                              key: item,
                            },
                          });
                        }),
                      ]
                    ),
                  ];
                  return h("div", a);
                },
              },
            },
            formSoltButton: [
              {
                label: "搜索",
                type: "primary",
                typeName: "el-button",
                size: "small",
                icon: "el-icon-search",
                click: this.handlerSearchDetail,
              },
              {
                label: "重置",
                typeName: "el-button",
                size: "small",
                icon: "el-icon-refresh-left",
                click: this.handleReset,
              },
            ],
          },
        },
        currentPage: 1,
        pageSize: 20,
        total: 0,
        tableData: {
          column: [
            {
              prop: "year",
              label: "年份",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "month",
              label: "月份",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "day",
              label: "日期",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "time",
              label: "时间",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
            },
            {
              prop: "value",
              label: "用电量(kwh)",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
              render: (h, scope) => {
                let that = this;
                let a = scope?.row?.value ?? 0;
                let b = a + " kwh";
                return <div>{a}</div>;
              },
            },
            {
              prop: "accumulateValue",
              label: "累计用电量(kwh)",
              minWidth: 100,
              align: "center",
              showOverflowTooltip: true,
              render: (h, scope) => {
                let that = this;
                let a = scope?.row?.accumulateValue ?? 0;
                let b = a + " kwh";
                return <div>{a}</div>;
              },
            },
          ],
          data: [],
        },
      };
    },
    created() {},
    mounted() {
      this.handlerSearchDetail();
    },
    methods: {
      async initData(data) {
        this.tableData.data = [];
        let that = this;
        let query = {
          ...data,
        };
        query.pageNum = that.currentPage;
        query.pageSize = that.pageSize;
        that.$store.commit("app/updateApiCount", "add");
        await getoverYearlist(query)
          .then((res) => {
            that.$store.commit("app/updateApiCount");
            if (res.code === 700) {
              this.$message.warning(res.msg);
              return false;
            }
            that.total = res?.total ?? 0;
            let arr = res?.rows ?? [];
            if (arr.length > 0) {
              arr.map((item) => {
                let one = item.time.split(" ");
                let two = one[0].split("-");
                let obj = {
                  year: two[0],
                  month: two[1],
                  day: two[2],
                  time: one[1],
                  value: item?.value ?? 0,
                  accumulateValue: item?.accumulateValue ?? 0,
                };
                this.tableData.data.push(obj);
              });
            }
          })
          .catch((err) => {
            that.$store.commit("app/updateApiCount");
            // this.$message.error("系统错误,请联系管理员!");
          });
      },
      requestAll(data) {
        let that = this;
        let query = {
          ...data,
        };
        getoverYeartotalvalue(query)
          .then((res) => {
            if (res.code === 700) {
              this.$message.warning(res.msg);
              return false;
            }
            this.allNum = res?.data ?? 0;
          })
          .catch(() => {
            this.allNum = 0;
            // this.$message.error("系统错误,请联系管理员!");
          });
      },
      // 搜索
      handlerSearchDetail() {
        const { ...other } = this.$refs?.form?.getFieldsValue();
        const data = {
          ...other,
        };
        data.deptId = this.$store.state.user.deptId;
        this.initData(data);
        this.requestAll(data);
      },
      // 重置
      handleReset() {
        this.monthDis = true;
        this.dayDis = true;
        this.dayArr = [];
        this.allNum = 0;
        this.$refs?.form?.resetFields();
        this.handlerSearchDetail();
      },
      handleSizeChange(val) {
        this.currentPage = 1;
        this.pageSize = val;
        this.handlerSearchDetail();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.handlerSearchDetail();
      },
      judgeDay() {
        this.dayArr = [];
        let year = this.$refs?.form?.getFieldsValue().year;
        let month = this.$refs?.form?.getFieldsValue().month;
        if (!year) {
          this.monthDis = true;
        } else {
          this.monthDis = false;
        }
        if (!year || !month) {
          this.dayDis = true;
        } else {
          this.dayDis = false;
          year = Number(year);
          if (
            month == "1" ||
            month == "3" ||
            month == "5" ||
            month == "7" ||
            month == "8" ||
            month == "10" ||
            month == "12"
          ) {
            // 31
            this.dayArr = [...dayConst.month31];
          } else if (
            month == "4" ||
            month == "6" ||
            month == "9" ||
            month == "11"
          ) {
            // 30
            this.dayArr = [...dayConst.month30];
          } else {
            if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
              // 闰年
              this.dayArr = [...dayConst.month29];
            } else {
              // 平年
              this.dayArr = [...dayConst.month28];
            }
          }
        }
      },
    },
  };
  </script>

  <style lang="scss" scoped>
  .overYear-content {
    margin-top: 20px;
    position: relative;
    .all-area {
      position: absolute;
      bottom: 5px;
      span {
        font-size: 24px;
        font-weight: 800;
        &:nth-child(2) {
          color: #f56c6c;
        }
      }
    }
  }
  </style>
